<template>
  <div>
    <img :src="img" class="center-second-info-img" />
    <div class="center-second-info-word-block">
      <div class="center-second-info-title">{{title}}</div>
      <countTo class="center-second-info-number" :startVal="0" :endVal="number" separator=","></countTo>
      <!-- <div class="center-second-info-number">
      {{number | numFormat}}-->
      <span class="center-second-info-unit">{{unit1}}</span>
      <!-- </div> -->
    </div>
  </div>
</template>
<script>
export default {
  props: ["img", "title", "number", "unit1"],
  filters: {
    numFormat(num) {
      var res = num.toString().replace(/\d+/, function(n) {
        // 先提取整数部分
        return n.replace(/(\d)(?=(\d{3})+$)/g, function($1) {
          return $1 + ",";
        });
      });
      return res;
    }
  }
};
</script>
<style>
.center-second-info-img {
  display: inline-block;
  width: 2.3rem;
  height: 2.3rem;
  margin-right: 1rem;
}
.center-second-info-title {
  font-family: PingFangSC-Regular;
  font-size: 1.1rem;
  /* color: #bed7fa; */
  color: #2bb7ff;
  letter-spacing: 0;
  margin-left: 0.5rem;
  line-height: 1.7rem;
}
.center-second-info-unit {
  font-family: PingFangSC-Regular;
  font-size: 0.92rem;
  /* color: #2bb7ff; */
  color: white;
  letter-spacing: 0;
  margin-left: 0.1rem;
}
.center-second-info-number {
  font-family: DINAlternate-Bold;
  font-size: 1.84rem;
  /* color: #2bb7ff; */
  color: white;
  letter-spacing: 0;
  margin-left: 0.5rem;
  margin-top: 0.3rem;
}
.center-second-info-word-block {
  display: inline-block;
}
</style>